<template>
  <div>
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-contact-card
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showPopup"
    />
    <van-popup
      v-model="show"
      round
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '50%',paddingTop:'40px' }"
      closeable
      close-icon="close"
    >
      <van-contact-list
        v-model="cartvo.chosenContactId"
        :list="contactList"
        default-tag-text="默认"
        @select="onSelect"
      />
      <!-- 待开发
      @add="onAdd"
      @edit="onEdit" -->
    </van-popup>
    <van-field
      readonly
      clickable
      label="驿站:"
      :value="currentYiZhan"
      placeholder="选择附近驿站"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onYiZhanConfirm"
      />
    </van-popup>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      订单预览
    </van-divider>
    <van-card
      :num="item.cartGoodsNum"
      :price="formatPrice(item.cartGoodsPrice * 100)"
      :desc="item.cartGoodsDesc"
      :title="item.cartGoodsName"
      :thumb="item.cartGoodsPic"
      v-for="item in cartvo.goods"
      :key="item.num"
    >
      <template #tags>
        <van-tag plain type="danger">限时特惠</van-tag>
      </template>
    </van-card>
    <van-field
      v-model="cartvo.message"
      rows="2"
      autosize
      label="留言"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言,特殊要求"
      show-word-limit
    />
    <div class="submitbar">
      <van-submit-bar
        :price="totalPrice"
        :disabled="!cartvo.goods.length"
        :button-text="submitBarText"
        :tip="jifen"
        @submit="onSubmit"
      >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Toast, Notify } from "vant";
export default {
  data() {
    return {
      cartvo: {
        chosenContactId: "",
        //选中的驿站id
        chosenYiZhanId: "",
        goods: [],
        totalMoney: "",
        message: "",
      },
      currentContact: {
        name: "",
        tel: "",
      },
      show: false,
      contactList: [],
      //显示选中的驿站
      currentYiZhan: "",
      showPicker: false,
      //驿站列表
      columns: [],
      //原始的驿站列表
      yizhans: [],
      
    };
  },

  created: function () {
    this.$axios
      .get("/order/cartlist")
      .then((res) => {
        if (res.data.code == 200) {
          this.isEmpty = false;
          this.cartvo.goods = res.data.info;
        }
      })
      .catch((error) => {
        console.log("请求购物车数据失败了");
      });

    this.$axios
      .get("/order/yizhanlist")
      .then((res) => {
        if (res.data.code == 200) {
          this.yizhans = res.data.info;
          var list = res.data.info;
          for (var i in list) {
            this.columns.push(list[i].yiZhanName);
          }
        }
      })
      .catch((error) => {
        console.log("请求驿站数据失败了");
      });

    this.$axios
      .get("/order/contactlist")
      .then(res => {
        if (res.data.code == 200) {
          this.contactList = res.data.info;
          var list2 = this.contactList;
          for (var n in list2) {
            if (list2[n].isDefault == true) {
              this.cartvo.chosenContactId = n;
              this.currentContact.name = list2[n].name;
              this.currentContact.tel = list2[n].tel;
            }
          }
        }
      })
      .catch(error => {
        console.log("请求联系人数据失败了");
      });

      
  },

  computed: {
    submitBarText() {
      const count = this.cartvo.goods.length;
      return "结算" + (count ? `(${count})` : "");
    },

    totalPrice() {
      var total = 0;
      var list0 = this.cartvo.goods;
      for (var i in list0) {
        var money = list0[i].cartGoodsPrice * list0[i].cartGoodsNum;
        total += money;
      }
      this.cartvo.totalMoney = total;
      return total * 100;
    },

    jifen(){
      return "本次将获得"+this.totalPrice/1000+"积分";
    }

  },

  methods: {
    onClickLeft: function () {
      this.$router.go(-1);
    },

    showPopup() {
      this.show = true;
    },

    onSelect(contact) {
      Toast("成功选择了" + contact.id);
      this.currentContact.name = contact.name;
      this.currentContact.tel = contact.tel;
      this.cartvo.chosenContactId = contact.id;
    },

    onYiZhanConfirm(value) {
      this.currentYiZhan = value;
      this.showPicker = false;
      var s = this.yizhans;
      for (var i in s) {
        if (s[i].yiZhanName == value) {
          this.cartvo.chosenYiZhanId = s[i].yiZhanId;
          break;
        }
      }
    },

    formatPrice(price) {
      return (price / 100).toFixed(2);
    },

    onSubmit() {
      if (
        this.cartvo.chosenContactId == null ||
        this.cartvo.chosenContactId == ""
      ) {
        Toast("你还没有选择联系人");
        return;
      }
      if (
        this.cartvo.chosenYiZhanId == null ||
        this.cartvo.chosenYiZhanId == ""
      ) {
        Toast("你还没有选择驿站");
        return;
      }
      this.$axios
        .post("/order/orderadd", this.cartvo)
        .then((res) => {
          if (res.data.code == 200) {
            var a = res.data.info;
            Notify({ type: "success", message: "提交成功" });
            this.$router.push({ path: "/user/pay", query: { orderId: a } });
            //console.log(this.images);
          }
        })
        .catch((error) => {
          console.log("请求修改失败了");
        });
    },
  },
};
</script>

<style scoped>
</style>
